<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>惊蛰的博客 滴滴开源：DoraemonKit来了，程序员的开发工具箱</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        @import url('/css/post-card.css');
        @import url('/css/main.css');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400;1,600&family=Roboto+Slab:wght@700&display=swap');
    </style>
    <style>
        body {
            font-family: Montserrat, sans;
        }

        .page-footer {
            color: var(--text-p3);
        }

        .sitemap {
            display: flex;
            justify-content: space-between;
            margin: .5rem 0 2rem;
            display: grid;
            grid-gap: 1rem 1rem;
            grid-auto-flow: column dense;
        }

        .sitemap-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .sitemap-group>.fs14 {
            margin: .5rem 0;
        }

        .page-footer .sitemap .sitemap-group>a {
            margin: .2rem 0;
            color: var(--text-p3);
        }

        .page-footer .text p {
            margin: 4px 0;
            line-height: 1.2;
        }
    </style>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="/js/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/jquery.scrollbar/0.2.9/jquery.scrollbar.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
    
<div class="l_body">
    <div class="l_main list">
        
<div class="nav-wrap mobile-hidden">
    <nav class="sub post cap header1">
        <a  href="/">最近发布</a>
        <a 
            href="/wiki/">分类</a>
        <a 
            href="/notes/">标签</a>
        <a href="/bibi/">说说</a>

    </nav>
    <div class="post-body-title header2">
        滴滴开源：DoraemonKit来了，程序员的开发工具箱
    </div>
</div>

<style>
    .sub2 {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: 11;
        background:#ffff!important;
        border-radius: 5px;
    }

    .sub2 a{
        display: block;
        margin-left: 0px!important;
        border-radius: 5px;
        margin: 5px 0 3px 0!important;
    }
</style>


<script>
    $(function () {
        //页面初始化的时候，获取滚动条的高度（上次高度）
        var start_height = $(document).scrollTop();
        //获取导航栏的高度(包含 padding 和 border)
        var navigation_height = $('.header1').outerHeight();
        console.log(start_height, navigation_height);
        $(window).scroll(function () {
            //触发滚动事件后，滚动条的高度（本次高度）
            var end_height = $(document).scrollTop();
            console.log(end_height);
            //触发后的高度 与 元素的高度对比
            if (end_height > navigation_height) {
                $('.header1').addClass('hide');
                $('.header2').addClass('hide');
            } else {
                $('.header1').removeClass('hide');
                $('.header2').removeClass('hide');
            }
            //触发后的高度 与 上次触发后的高度 比较
            if (end_height < start_height) {
                $('.header1').removeClass('hide');
                $('.header2').removeClass('hide');
            }
            //再次获取滚动条的高度，用于下次触发事件后的对比
            start_height = $(document).scrollTop();
        });
    });
</script>


        <h2>
            滴滴开源：DoraemonKit来了，程序员的开发工具箱
        </h2>

        <div class="body-main-content">
            <h2 id="DoraemonKit-‘do-ra-’emon-，简称DoKit，中文名-哆啦A梦，意味着能够像哆啦A梦一样提供给他的主人各种各样的工具。Just-Do-Kit。"><a href="#DoraemonKit-‘do-ra-’emon-，简称DoKit，中文名-哆啦A梦，意味着能够像哆啦A梦一样提供给他的主人各种各样的工具。Just-Do-Kit。" class="headerlink" title="DoraemonKit /‘dɔ:ra:’emɔn/，简称DoKit，中文名 哆啦A梦，意味着能够像哆啦A梦一样提供给他的主人各种各样的工具。Just Do Kit。"></a>DoraemonKit /‘dɔ:ra:’emɔn/，简称DoKit，中文名 哆啦A梦，意味着能够像哆啦A梦一样提供给他的主人各种各样的工具。Just Do Kit。</h2><p><img src="" data-original="http://p6-tt.byteimg.com/large/pgc-image/043742a5903a42779c538786e351b515?from=pc" alt="043742a5903a42779c538786e351b515.jpg"></p>
<h2 id="DoraemonKit是什么？"><a href="#DoraemonKit是什么？" class="headerlink" title="DoraemonKit是什么？"></a>DoraemonKit是什么？</h2><p> DoraemonKit 是一个功能平台，工具集合，和名字一样，哆啦A梦，能够让每一个 App 快速接入一些常用的或者你没有实现的一些辅助开发工具、测试效率工具、视觉辅助工具，而且能够完美在 Doraemon 面板中接入你已经实现的与业务紧密耦合的一些非通有的辅助工具，并搭配我们的dokit平台，让功能得到延伸，接入方便，便于扩展。</p>
<h2 id="DoraemonKit有什么特色？"><a href="#DoraemonKit有什么特色？" class="headerlink" title="DoraemonKit有什么特色？"></a>DoraemonKit有什么特色？</h2><p>1、DoraemonKit 能够快速让你的业务测试代码能够在这里统一管理，统一收口；</p>
<p>2、DoraemonKit 内置很多常用的工具，避免重复实现，一次接入，你将会拥有强大的工具集合；</p>
<p>3、搭配dokit平台，方便你进行数据mock以及记录你的每一次健康体检用例。</p>
<p>先上一张图，看看它有啥：<br><img src="" data-original="http://p6-tt.byteimg.com/large/pgc-image/0cfbd4c5964445cb9883005b98acee8d?from=pc" alt="0cfbd4c5964445cb9883005b98acee8d.jpg"></p>
<h2 id="你可用的模块有哪些？"><a href="#你可用的模块有哪些？" class="headerlink" title="你可用的模块有哪些？"></a>你可用的模块有哪些？</h2><h3 id="一、平台工具-www-dokit-cn"><a href="#一、平台工具-www-dokit-cn" class="headerlink" title="一、平台工具(www.dokit.cn)"></a>一、平台工具(<a target="_blank" rel="noopener" href="http://www.dokit.cn/">www.dokit.cn</a>)</h3><p>【数据Mock】 App接口Mock解决方案，提供一套基于App网络拦截的接口Mock方案，无需修改代码即可完成对于接口数据的Mock。</p>
<p>【健康体检】 一键式操作，整合DoKit多项工具，数据可视化，快速准确定位问题，让你对app的性能了如指掌。</p>
<h3 id="二、常用工具"><a href="#二、常用工具" class="headerlink" title="二、常用工具"></a>二、常用工具</h3><p>【App 信息查看】 快速查看手机信息，App 基础信息、签名相关、权限信息的渠道，避免去手机设置查找或者查看项目源代码的麻烦；</p>
<p>【开发者选项 Android特有】 一键跳转开发者选项，避免安卓由于平台差异导致的入口不一致</p>
<p>【本地语言】 一键跳转本地语言，避免安卓由于平台差异导致的入口不一致</p>
<p>【沙盒浏览】 App 内部文件浏览的功能，支持删除和预览, 并且能通过 AirDrop 或者其他分享方式上传到 PC 中，进行更加细致的操作；</p>
<p>【MockGPS】 App 能定位到全国各地，支持地图地位和手动输入经纬度；</p>
<p>【H5任意门】 开发测试同学可以快速输入 H5 页面地址，查看该页面效果；</p>
<p>【Crash查看】 方便本地打印出出现 Crash 的堆栈；</p>
<p>【子线程UI】 快速定位哪一些 UI 操作在非主线程中进行渲染，避免不必要的问题；（iOS独有）</p>
<p>【清除本地数据】 一键删除沙盒中所有数据；</p>
<p>【NSLog】 把所有 NSLog 信息打印到UI界面，避免没有开发证书无法调试的尴尬；</p>
<p>【Lumberjack】 每一条 CocoaLumberjack 的日志信息，都在在 App 的界面中显示出来，再也不需要导出日志这么麻烦;（iOS独有）</p>
<p>【DBView】 通过网页方便快捷的操作应用内数据库，让数据库的调试变得非常优雅;</p>
<p>【模拟弱网】 限制网速，模拟弱网环境下App的运行情况。（android独有）</p>
<h3 id="三、性能检测"><a href="#三、性能检测" class="headerlink" title="三、性能检测"></a>三、性能检测</h3><p>【帧率】 App 帧率信息提供波形图查看功能，让帧率监控的趋势更加明显；</p>
<p>【CPU】 App CPU 使用率信息提供波形图查看功能，让 CPU 监控的趋势更加形象；</p>
<p>【内存】 App 内存使用量信息提供波形图查看功能，让内存监控的趋势更加鲜明；</p>
<p>【流量监控】 拦截 App 内部流量信息，提供波形图展示、流量概要展示、流量列表展示、流量筛选、流量详情，对流量信息统一拦截，成为我们 App 中自带的 “Charles”；</p>
<p>【卡顿】 锁定 App 出现卡顿的时刻，打印出对应的代码调用堆栈；</p>
<p>【大图检测】 通过流量监测，找出所有的大小超标的图片，避免下载大图造成的流量浪费和渲染大图带来的CPU消耗。</p>
<p>【启动耗时】 无侵入的统计出App启动过程的总共耗时；</p>
<p>【UI层级检查】 检查出每一个页面中层级最深的元素；</p>
<p>【函数耗时】 从函数级别分析app性能瓶颈；</p>
<p>【Load】 找出所有的Load方法，并给出耗时分析；（iOS独有）</p>
<p>【内存泄漏】 找出App中所有的内存泄漏的问题。</p>
<h3 id="四、视觉工具"><a href="#四、视觉工具" class="headerlink" title="四、视觉工具"></a>四、视觉工具</h3><p>【颜色吸管】 方便设计师 UI 捉虫的时候，查看每一个组件的颜色值是否设置正确；</p>
<p>【组件检查】 可以抓取任意一个UI控件，查看它们的详细信息，包括控件名称、控件位置、背景色、字体颜色、字体大小；</p>
<p>【对齐标尺】 参考 Android 系统自带测试工具，能够实时捕获屏幕坐标，并且可以查看组件是否对齐；</p>
<p>【元素边框线】 绘制出每一个 UI 组件的边框，对于组件布局有一定的参考意义。</p>
<h3 id="五、Weex专项工具（CML专项工具）"><a href="#五、Weex专项工具（CML专项工具）" class="headerlink" title="五、Weex专项工具（CML专项工具）"></a>五、Weex专项工具（CML专项工具）</h3><p>【console日志查看】 方便在端上查看每一个Weex文件中的console日志，提供分级和搜索功能；</p>
<p>【storage缓存查看】 将Weex中的storage模块的本地缓存数据可视化展示；</p>
<p>【容器信息】 查看每一个打开的Weex页面的基本信息和性能数据；</p>
<p>【DevTool】 快速开启Weex DevTool的扫码入口。</p>
<p>tips ： 如果使用我们滴滴优秀的开源跨端方案 chameleon 也可以集成该工具集合</p>
<h3 id="六、支持自定义的业务工具集成到面板中"><a href="#六、支持自定义的业务工具集成到面板中" class="headerlink" title="六、支持自定义的业务工具集成到面板中"></a>六、支持自定义的业务工具集成到面板中</h3><p>统一维护和管理所有的测试模块，详见接入手册</p>
<h3 id="七、微信小程序专项工具"><a href="#七、微信小程序专项工具" class="headerlink" title="七、微信小程序专项工具"></a>七、微信小程序专项工具</h3><p>详见 Doraemon mini program debugger</p>
<h2 id="可用在哪些平台？"><a href="#可用在哪些平台？" class="headerlink" title="可用在哪些平台？"></a>可用在哪些平台？</h2><p>iOS，Android，微信小程序。<br><img src="" data-original="http://p6-tt.byteimg.com/large/pgc-image/adcf146ff5bd4def84a5d03d01895fbb?from=pc" alt="adcf146ff5bd4def84a5d03d01895fbb.jpg"><br><img src="" data-original="http://p1-tt.byteimg.com/large/pgc-image/0afd404e601d4d9b80492c77989bde8a?from=pc" alt="adcf146ff5bd4def84a5d03d01895fbb.jpg"></p>
<h2 id="开源项目地址："><a href="#开源项目地址：" class="headerlink" title="开源项目地址："></a>开源项目地址：</h2><p><a target="_blank" rel="noopener" href="https://github.com/didi/DoraemonKit">https://github.com/didi/DoraemonKit</a></p>

        </div>
        <div class="page-footer reveal fs12">
    <hr>
    <div class="sitemap">
        <div class="sitemap-group">
            <span class="fs14">博客</span>
            <a href="/">近期发布</a>
            <a href="/wiki/">分类</a>
            <a href="/notes/">标签</a>
            <a href="/archives/">归档</a>
        </div>
        <div class="sitemap-group">
            <span class="fs14">社交</span>
            <a target="_blank" rel="external nofollow noopener noreferrer" href="">GitHub</a>
            <a target="_blank" rel="external nofollow noopener noreferrer" href="">GitLab</a>
        </div>
        <div class="sitemap-group">
            <span class="fs14">更多</span>
            <a href="/about/">关于本站</a>
            <a href="/bibi/">哔哔</a>
            <a target="_blank" rel="external nofollow noopener noreferrer" href="https://image.jingzhe.xyz">图床</a>
        </div>
    </div>
    <div class="text">
        <p>本博客所有文章除特别声明外，均采用
            <a target="_blank" rel="external nofollow noopener noreferrer"
                href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
                CCBY-NC-SA 4.0
            </a>
            许可协议，转载请注明出处。
        </p>
    </div>
</div>
    </div>
    <aside class="l_right">
        
<header class="header">
    <div class="logo-wrap">
        <a class="avatar" href="/about/">
            <img class="avatar" src="" data-original="https://ae01.alicdn.com/kf/Ua26a9ebfe30847ff8d4d7d7c7647c61cH.jpg"></a>
        <a class="title" href="/">
            <div class="main">惊蛰</div>
            <div class="sub normal cap"></div>
            <div class="sub hover cap" style="opacity:0">jingzhe.xyz</div>
        </a>
    </div>
    <nav class="menu dis-select">
        <a class="nav-item " href="/">博客</a>
        <a class="nav-item " href="/archives/">归档</a>
        <a class="nav-item " href="/about/">关于</a>
    </nav>
</header>
<script>
    $(function () {
        // https://v1.hitokoto.cn/?c=f&encode=text&max_length=8
        $.ajax({
            url: "https://v1.hitokoto.cn/?c=f&encode=text&max_length=10&min_length=5&c=i",
            success: function (result) {
                $(".normal").html(result);
            }
        });

    })
</script>
<div class="widgets">
    <div class="widget-wrap">
    <div class="widget-header cap dis-select"><span class="name">目录</span></div>
    <div class="widget-body fs14 toc-body">
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#DoraemonKit-%E2%80%98do-ra-%E2%80%99emon-%EF%BC%8C%E7%AE%80%E7%A7%B0DoKit%EF%BC%8C%E4%B8%AD%E6%96%87%E5%90%8D-%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%8C%E6%84%8F%E5%91%B3%E7%9D%80%E8%83%BD%E5%A4%9F%E5%83%8F%E5%93%86%E5%95%A6A%E6%A2%A6%E4%B8%80%E6%A0%B7%E6%8F%90%E4%BE%9B%E7%BB%99%E4%BB%96%E7%9A%84%E4%B8%BB%E4%BA%BA%E5%90%84%E7%A7%8D%E5%90%84%E6%A0%B7%E7%9A%84%E5%B7%A5%E5%85%B7%E3%80%82Just-Do-Kit%E3%80%82"><span class="toc-text">DoraemonKit &#x2F;‘dɔ:ra:’emɔn&#x2F;，简称DoKit，中文名 哆啦A梦，意味着能够像哆啦A梦一样提供给他的主人各种各样的工具。Just Do Kit。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DoraemonKit%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">DoraemonKit是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DoraemonKit%E6%9C%89%E4%BB%80%E4%B9%88%E7%89%B9%E8%89%B2%EF%BC%9F"><span class="toc-text">DoraemonKit有什么特色？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%A0%E5%8F%AF%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-text">你可用的模块有哪些？</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%B9%B3%E5%8F%B0%E5%B7%A5%E5%85%B7-www-dokit-cn"><span class="toc-text">一、平台工具(www.dokit.cn)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E5%B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7"><span class="toc-text">二、常用工具</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%80%A7%E8%83%BD%E6%A3%80%E6%B5%8B"><span class="toc-text">三、性能检测</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E8%A7%86%E8%A7%89%E5%B7%A5%E5%85%B7"><span class="toc-text">四、视觉工具</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81Weex%E4%B8%93%E9%A1%B9%E5%B7%A5%E5%85%B7%EF%BC%88CML%E4%B8%93%E9%A1%B9%E5%B7%A5%E5%85%B7%EF%BC%89"><span class="toc-text">五、Weex专项工具（CML专项工具）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AD%E3%80%81%E6%94%AF%E6%8C%81%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84%E4%B8%9A%E5%8A%A1%E5%B7%A5%E5%85%B7%E9%9B%86%E6%88%90%E5%88%B0%E9%9D%A2%E6%9D%BF%E4%B8%AD"><span class="toc-text">六、支持自定义的业务工具集成到面板中</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%83%E3%80%81%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%93%E9%A1%B9%E5%B7%A5%E5%85%B7"><span class="toc-text">七、微信小程序专项工具</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%AF%E7%94%A8%E5%9C%A8%E5%93%AA%E4%BA%9B%E5%B9%B3%E5%8F%B0%EF%BC%9F"><span class="toc-text">可用在哪些平台？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%E5%9C%B0%E5%9D%80%EF%BC%9A"><span class="toc-text">开源项目地址：</span></a></li></ol>
    </div>

    <!-- 
     -->
</div>

<script>
    // 让锚点位置下降80个点数
    $(".body-main-content *[id]").each(i => {
        $($(".body-main-content *[id]")[i]).attr('style', 'padding-top: 60px;margin-top: -60px;');
    })

    $(function () {
        $('.toc-link').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location
                .hostname == this.hostname) {
                var $target = $(this);
                $target = $('[id=' + decodeURI(this.hash.slice(1)) + ']');
                if ($target.length) {
                    var targetOffset = $target.offset().top;
                    $('html,body').animate({
                            scrollTop: targetOffset
                        },
                        700);
                    return false;
                }
            }
        });
    })
</script>
    <footer class="footer dis-select">
    <div class="social-wrap">
        <a class="social" title="GitHub" href="https://github.com/xaoxuu" target="_blank"
            rel="external nofollow noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/08a41b181ce68.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/08a41b181ce68.svg"
                data-ll-status="loaded"></a><a class="social" title="Spotify"
            href="https://open.spotify.com/user/xaoxuu" target="_blank"
            rel="external nofollow noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3845874.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3845874.svg"
                data-ll-status="loaded"></a><a class="social" title="Unsplash"
            href="https://unsplash.com/@xaoxuu" target="_blank"
            rel="external nofollow noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3616429.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/3616429.svg"
                data-ll-status="loaded"></a><a class="social" title="Comments" href="/about/#comments"
            rel="noopener noreferrer"><img class="lazy entered loaded"
                src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/942ebbf1a4b91.svg"
                data-src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.3/social/942ebbf1a4b91.svg"
                data-ll-status="loaded"></a></div>
</footer>
</div>
    </aside>
</div>

<style>

</style>
    <div class="loading-div" id="loading" style="display: none;">
    <div class="loading">
        <svg id="stage" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet" stroke="#fff" stroke-width="3"
            stroke-linecap="round" fill="none"></svg>
        <span>加载中...</span>
    </div>
</div>
<style>
    .loading-div {
        position: absolute;
        display: flex;
        top: 0px;
        width: 100%;
        height: 100%;
        align-items: center;
        z-index: 20;
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    /*动画效果*/
    @keyframes fadeIn {
        from {
            backdrop-filter: blur(0px);
            background: rgba(0, 0, 0, 0);
        }

        to {
            backdrop-filter: blur(2px);
            background: rgb(0, 0, 0, 0.5);
        }
    }

    /*动画效果*/
    @keyframes fadeIn1 {
        from {
            filter: blur(1px);
        }

        to {
            filter: blur(0px);
        }
    }

    .loading {
        color: #fff;
        width: 250px;
        height: 250px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
        animation-name: fadeIn1;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    svg {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /* background: #000; */
    }
</style>
<script src="https://lib.baomitu.com/gsap/3.7.1/gsap.min.js"></script>
<script>
    let pts = [],
        nPts = 12,
        lineLength = 60,
        timeScale = 0.5

    const radius = 180,
        tl = gsap.timeline()

    for (let i = 0; i < nPts; i++) { // plot points + add circles
        const c = document.createElementNS("http://www.w3.org/2000/svg", "circle"),
            angle = (i / nPts * Math.PI * 2) - Math.PI / 2,
            x = Math.cos(angle) * radius,
            y = Math.sin(angle) * radius

        pts.push(x.toFixed(2) + ',' + y.toFixed(2) + ' ')

        gsap.set(c, {
            x: 250,
            y: 250,
            scale: 0.8,
            attr: {
                class: 'c' + i,
                r: 3,
                cx: x,
                cy: y,
                fill: '#fff',
                stroke: 'none'
            }
        })

        stage.appendChild(c);
    }


    for (let i = 0; i <= nPts; i++) { // add paths + animate
        const p = document.createElementNS("http://www.w3.org/2000/svg", "path")

        gsap.set(p, {
            x: 250,
            y: 250,
            attr: {
                class: 'line' + i,
                d: 'M' + pts[i] + ' C' + gsap.utils.wrap(pts, [i + 2]) + ' ' + gsap.utils.wrap(pts, [i - 5]) +
                    ' ' + gsap.utils.wrap(pts, [i - 2]),
                // d:'M'+pts[i]+' c 0,0 '+gsap.utils.wrap(pts,[i-nPts/2])+' '+gsap.utils.wrap(pts,[i-3]),
                'stroke-dasharray': lineLength + ' ' + lineLength,
                'stroke-dashoffset': lineLength
            },
        });

        stage.appendChild(p);

        const lineTL = gsap.timeline({
                repeat: -1,
                defaults: {
                    duration: 0.4
                }
            })
            .to(p, {
                attr: {
                    'stroke-dashoffset': -lineLength
                },
                ease: 'expo.inOut',
                duration: 0.6
            }, 0.4)

        if (i < nPts) {
            lineTL.to('.c' + i, {
                scale: 1.2,
                ease: 'expo.inOut'
            }, 0.1)
            lineTL.to('.c' + i, {
                scale: 0.8,
                ease: 'expo.in'
            }, 0.5)
        }

        tl.add(lineTL, 1 - i / nPts);
    }

    tl.play(5).timeScale(timeScale)
</script>
<script>
    $(function () {
        // loadingShow()
    })

    function loadingShow() {
        $("#loading").show();
    }

    function loadingHide() {
        $("#loading").hide();
    }
</script>

    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery.scrollbar/0.2.9/jquery.scrollbar.min.js"></script> -->
    <script>
        // $(document).ready(function () {
        //     $('.l_body').scrollbar({
        //         barWidth: 10, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
        //         position: "x,y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
        //         wheelDis: 15 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
        //     });
        // });
    </script>
    <script>
        $('img').lazyload({
            threshold: 0,
            failure_limit: 0,
            event: "scroll", //触发事件
            effect: "show", //显示方式
            container: window, //容器
            data_attribute: "original", //属性
            skip_invisible: true,
            appear: null,
            load: null,
            placeholder: ""
        });
    </script>
<script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 3,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>